<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<!--
产品头部下方店铺模块
2021/5/14
-->
<html>
<head>
    <title>Title</title>
<%--    <script src="static/js/frame/jquery-3.5.1.min.js"></script>--%>
    <style>
        body, button, input, select, textarea {
            font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
            -ms-overflow-style: scrollbar;
        }
        fieldset, img {
            border: 0;
        }
    </style>
</head>
<body>
<!-- header start -->
<div id="header" class="tm-chn-">
    <div id="headerCon">
        <!-- logo -->
        <h1 id="mallLogo">
            <span class="mlogo">
                <a href="/" title="天猫Tmall.com">
                    <i class="iconfont icon-tianmaotmall" style="color: #ff0036;font-weight: 400; font-size: 28px">
                    </i>
                    "天猫Tmall.com"
                </a>
            </span>
        </h1>
        <!-- ------------>
        <!-- shop-info start -->
        <div id="shopExtra" data-spm="">
            <div class="slogo">
                <a class="slogo-shopname" href="/shop/view_shop.htm?brandId=${shop.id}" target="_blank">
                    <strong>${shop.shopName}</strong>
                </a>
                <!-- shop-info start -->
                <div class="slogo-extraicon bShop">
                    <span class="flagship-icon">
                        <span class="flagship-icon-font">品牌直销</span>
                    </span>
                    <span class="ww-light ww-static">
                        <a target="_blank" class="ww-inline ww-online chat" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"></a>
                    </span>
                </div>
            </div>
            <div id="shop-info">
                <div class="main-info">
                    <div class="shopdsr-item">
                        <div class="shopdsr-title">描 述</div>
                        <div class="shopdsr-score shopdsr-score-up-ctrl">
                            <span class="shopdsr-score-con">${babyStar}</span>
                            <s class="shopdsr-score-up iconfont ${gapBabyStar<0?'icon-xiajiantou':gapBabyStar>0?'icon-shangjiantou':''}">

                            </s>
                        </div>
                    </div>
                    <div class="shopdsr-item">
                        <div class="shopdsr-title">服 务</div>
                        <div class="shopdsr-score shopdsr-score-up-ctrl">
                            <span class="shopdsr-score-con">${sellerStar}</span>
                            <s class="shopdsr-score-up iconfont ${gapSellerStar<0?'icon-xiajiantou':gapSellerStar>0?'icon-shangjiantou':''}">
                            </s>
                        </div>
                    </div>
                    <div class="shopdsr-item">
                        <div class="shopdsr-title">物 流</div>
                        <div class="shopdsr-score shopdsr-score-up-ctrl">
                            <span class="shopdsr-score-con">${logisticsStar}</span>
                            <s class="shopdsr-score-up iconfont ${gapLogisticsStar<0?'icon-xiajiantou':gapLogisticsStar>0?'icon-shangjiantou':''}">
                            </s>
                        </div>
                    </div>
                    <a class="slogo-triangle">
                        <i class="icon-triangle"></i>
                    </a>
                </div>
                <!-- shop-info end -->
                <!--isHK： ，isShow：false -->
                <!-- 店铺详情信息伪类div 开始 -->
                <div class="extra-info" style="left: -114px; top:51px;width: 265px; z-index: 100000; display: none">
                    <div>
                        <div class="bd">
                            <div class="shop-rate">
                                <h4>
                                    店铺动态评分
                                    <span class="compare">与同行业相比</span>
                                </h4>
                                <ul class="render-byjs">
                                    <li>
                                        描述相符：
                                    <a>
                                        <em class="count" title="4.9539">${babyStar}</em>
                                        <span class="rateinfo" title="计算规则:(店铺得分-同行业平均分)/(同行业店铺最高得分-同行业平均分)">
                                            <b class="iconfont ${gapBabyStar<0?'icon-xiajiantou':gapBabyStar>0?'icon-shangjiantou':''}"></b>
                                            <i>&nbsp;${gapBabyStar<0?'低于':gapBabyStar>0?'高于':'与同行相等'}</i>
                                            <em>&nbsp;${gapBabyStar==0.0?'':gapBabyStar+='%'}</em>
                                    </span>
                                    </a>
                                    </li>
                                    <li>
                                        服务态度：
                                        <a>
                                            <em class="count" title="4.9539">${sellerStar}</em>
                                            <span class="rateinfo" title="计算规则:(店铺得分-同行业平均分)/(同行业店铺最高得分-同行业平均分)">
                                            <b class="iconfont ${gapSellerStar<0?'icon-xiajiantou':gapSellerStar>0?'icon-shangjiantou':''}"></b>
                                            <i>&nbsp;${gapBabyStar<0?'低于':gapBabyStar>0?'高于':'与同行相等'}</i>
                                            <em>&nbsp;${gapSellerStar==0.0?'':gapSellerStar+='%'}</em>
                                    </span>
                                        </a>
                                    </li>
                                    </li>
                                    <li>
                                        物流服务：
                                        <a>
                                            <em class="count" title="4.9539">${logisticsStar}</em>
                                            <span class="rateinfo" title="计算规则:(店铺得分-同行业平均分)/(同行业店铺最高得分-同行业平均分)">
                                            <b class="iconfont ${gapLogisticsStar<0?'icon-xiajiantou':gapLogisticsStar>0?'icon-shangjiantou':''}"></b>
                                            <i>&nbsp;${gapBabyStar<0?'低于':gapBabyStar>0?'高于':'与同行相等'}</i>
                                            <em>&nbsp;${gapLogisticsStar==0.0?'':gapLogisticsStar+='%'}</em>
                                    </span>
                                        </a>
                                    </li>
                                    </li>
                                </ul>
                            </div>
                            <div class="extend">
                                <h4 class="title">店铺服务</h4>
                                <ul>
                                    <li class="shopkeeper">
                                        <label>掌　　柜：</label>
                                        <div class="right">
                                            <a href="#">${shop.shopName}</a>
                                        </div>
                                    </li>
                                    <li>
                                        <label>客　　服：</label>
                                        <div class="right">
                                            <span class="ww-light ww-static" data-nick="%E7%94%9F%E6%B4%BB%E5%9C%A8%E5%B7%A6%E6%97%97%E8%88%B0%E5%BA%97" data-tnick="%E7%94%9F%E6%B4%BB%E5%9C%A8%E5%B7%A6%E6%97%97%E8%88%B0%E5%BA%97" data-encode="true" data-display="inline" data-icon="static">
                                                <a style="display: inline-block" class="ww-inline ww-online chat" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。">
                                                </a>
                                            </span>
                                        </div>
                                    </li>
                                    <li style="height: 22px">
                                        <label>开店时长：</label>
                                        <div class="right tm-shop-age">
                                            <span class="tm-shop-age-num">${tfn:calculateDataGap(shop.createTime, "year")}</span>
                                            <span class="tm-shop-age-content">天猫${tfn:calculateDataGap(shop.createTime, "year")}年店</span>
                                        </div>
                                    </li>
                                    <li class="locus">
                                        <label>所 在 地：</label>
                                        <c:set var="areas" value='${fn:split(shop.address, " ")}'></c:set>
                                        <div class="right">${areas[0]}， ${areas[1]}</div>
                                    </li>
                                    <li>
                                        <label>企业资质：</label>
                                        <div class="right">
                                            <a href="//zhaoshang.tmall.com/maintaininfo/liangzhao.htm?xid=2b474205ba0264eb19bd7c8d3a965250" class="tm-gsLink" target="_blank">
                                                <img width="20" height="22" src="//assets.alicdn.com/app/marketing/xfile/national_emblem_light.png" alt="">
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="other">
                                <a class="enter-shop" href="/shop/view_shop.htm?brandId=${shop.id}" data-spm="" target="_blank">
                                    <i class="iconfont icon-icon" style="font-size: 20px"></i>
                                    <span>进店逛逛</span>
                                </a>
                                <a id="xshop_collection_href" href="//favorite.taobao.com/popup/add_collection.htm?id=108231462&amp;itemid=108231462&amp;itemtype=0&amp;ownerid=2b474205ba0264eb19bd7c8d3a965250&amp;scjjc=2" mercury:params="id=108231462&amp;itemid=108231462&amp;itemtype=0&amp;ownerid=2b474205ba0264eb19bd7c8d3a965250" class="J_PopupTrigger collection xshop_sc J_TDialogTrigger J_TokenSign" data-width="440" data-height="290" data-closebtn="true">
                                    <i class="iconfont icon-star"></i>
                                    <span>收藏本店</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 店铺详情信息伪类div 结束-->
            </div>
        </div>
        <div class="shopwt">
            <div class="shopwt-desc">
                <div class="shopwt-title">手机逛</div>
                <i class="shopwt-qr iconfont icon-erweima2"></i>
            </div>
        <a href="#" class="slogo-triangle">
            <i class="icon-triangle"></i>
        </a>
            <div class="tm-qrcode-hpic" style="display: none">
                <img src="//gcodex.alicdn.com/qrcode.do?biz_code=tmallpc&content=http%3A%2F%2Fm.laiwang.com%2Fmarket%2Flaiwang%2Ftmall%2Fapp-download.php%3F%26type%3Dshop%26biz%3Dtmall%26iframe%3D1%26mmstat%3Dshop_head%26key%3D200155482&size=175&margin=0&logo_url=http%3A%2F%2Fimg.alicdn.com%2Ftfs%2FTB1prMSRXXXXXcCXFXXXXXXXXXX-198-198.png&channel_id=2703" width="140">
                <p class="J_QrcodeHeadText">扫一扫，手机逛起来</p>
            </div>
        </div>
        <div class="header-extra">
            <div id="mallSearch" class="mall-search">
                <form name="searchTop" action="/search_product.htm" class="mallSearch-form" accept-charset="gbk">
                    <fieldset>

                        <div class="mallSearch-input clearfix">
                            <div class="defaultSearch">
                                <div id="s-combobox-407" class="s-combobox">
                                    <div class="s-combobox-input-wrap">
                                    <input type="text" name="enter" accesskey="s" autocomplete="off" x-webkit-speech="" x-webkit-grammar="builtin:translate" value="" id="mq" class="s-combobox-input" role="combobox" aria-haspopup="true" title="请输入搜索文字" aria-label="请输入搜索文字">
                                </div>
                                    <label for="mq" class="s-combobox-placeholder" style="color: rgb(102, 102, 102); visibility: visible;">搜索 天猫 商品/品牌/店铺</label></div>
                                <button id="J_SearchBtn" type="submit">
                                    搜天猫
                                </button>
                            </div>
<%--                            <button id="J_CurrShopBtn" class="currShopBtn" type="button">搜本店<s></s></button>--%>
                            <input id="J_Type" type="hidden" name="type" value="p">
<%--                            <input id="J_MallSearchStyle" type="hidden" name="style" value="">--%>
<%--                            <input id="J_Cat" type="hidden" name="cat" value="all">--%>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        // 店铺悬浮伪类
        $("#shopExtra").mouseover(function () {
            $(".extra-info").show();
        });
        $("#shopExtra").mouseout(function () {
            $(".extra-info").hide();
        });

        $(".extra-info").mouseenter(function () {
            $(this).show();
        });
        $(".extra-info").mouseleave(function () {
            $(this).hide();
        })
        // -------------

        // 手机逛悬浮伪类
        $(".shopwt").mouseover(function () {
            $(".tm-qrcode-hpic").show();
        });
        $(".shopwt").mouseout(function () {
            $(".tm-qrcode-hpic").hide();
        });

        $(".tm-qrcode-hpic").mouseenter(function () {
            $(this).show();
        });
        $(".tm-qrcode-hpic").mouseleave(function () {
            $(this).hide();
        });
        // -------------

        // 店铺详情头部右边搜索框事件,输入，隐藏输入框提示文字
        $("#mq").focus(function () {
            $(".s-combobox-placeholder").css("color","rgb(204, 204, 204)");
        });
        $("#mq").blur(function () {
            $(".s-combobox-placeholder").css("color","rgb(102, 102, 102)");
            if($(".s-combobox-placeholder").text()==""){
                $(".s-combobox-placeholder").text("搜索 天猫 商品/品牌/店铺");
            } else{
                $(".s-combobox-placeholder").text("");
            }
        });
        $("#mq").keyup(function () {
            $(".s-combobox-placeholder").text("");
        });


        // 搜索之前，必须输入
        $(".mallSearch-form").submit(function () {
            var value = $(".s-combobox-input").val().replace(/\s*/g,"");
            $(".s-combobox-input").val(value);
            if(value.length < 1){
                $(".s-combobox-placeholder").text("请输入关键字");
                $(".s-combobox-input").addClass("arrow_box");
                setTimeout(function () {
                    $(".s-combobox-input").removeClass("arrow_box");
                }, 1200);
                return false;
            }
        });
    });
</script>
</html>
